
<template>
	  <div class="bgy-swdlxx-index">
      <el-container>
        <el-aside><navmenu></navmenu></el-aside>
        <el-container>
          <el-header height="90px">
            <top-title></top-title>
            <section class="index-tabs clearfix">
              <el-tabs class="l" v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
                <el-tab-pane
                  v-for="(item, index) in editableTabs"
                  :key="item.menuId"
                  :index="index"
                  :label="item.menuName"
                  :name="item.menuId">
                <div slot="label" @click="paneClick(item)" class="tabslabel">
                  <i class="iconfont" :class="item.iconUrl"></i>
                  <span>{{item.menuName}}</span>
                </div>
                </el-tab-pane>
              </el-tabs>
              <el-dropdown @command="dropdownCommand">
                <span class="el-dropdown-link rown-box">
                  <i class="iconfont iconarrow-down"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="closeAll">关闭所有</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </section>
          </el-header>
          <el-main>
            <transition name="fade-transform" mode="out-in">
                <router-view></router-view>
            </transition>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex';
import navmenu from '@/components/navmenu/navmenu'; //菜单
import topTitle from '@/components/topTitle/topTitle'; //头部

var viewer = null;
export default {
  name: 'index',
  data () {
    return {
        isShowIw: false,
        isShow:false,
        // asideWidth: '207px'
    }
  },
  computed:{
    ...mapState([
      'editableTabs',
      'editableTabsValue',
      'isCollapse'
    ]),
    editableTabsValue: {
      get() {
          return this.$store.state.editableTabsValue
        },
        set(newValue) {
          return this.$store.state.editableTabsValue
        }
    }
  },
  watch: {
    '$store.state.editableTabs': {
      immediate: true,
      handler (v) {
          if (v) {
            v.forEach(element => {
              if (element.id === this.editableTabsValue) {
                this.$router.push({
                  path: element.path
                })
              }
            })
          }
      }
    },
    '$store.state.isCollapse': {
      immediate: true,
      handler (v) {
        if(!v) {
          // this.asideWidth = '207px'
        } else {
          // this.asideWidth = '56px'
        }
      }
    }
  },
  components: {
    navmenu,
    topTitle
  },
  mounted() {
  },
  created(){
    // this.SAVE_EDITABLETABSVALUE()
    // this.SAVE_EDITABLETABS()
    // findProvinceAndCityTree().then(res => {
    //   this.SAVE_ADDRESSDATA(res.data)
    // })
  },
  methods: {
      ...mapMutations([
         'SAVE_TOKEN',
         'DETALE_EDITABLETABS',
         'SAVE_EDITABLETABSVALUE',
         'SAVE_EDITABLETABS',
         'SAVE_ADDRESSDATA'
       ]),
      /**
      * @method 删除标签页
       */
      removeTab(targetName) {
          this.DETALE_EDITABLETABS(targetName)
      },
      /**
       * @method 点击标签页
       */
      paneClick(params){
        this.SAVE_EDITABLETABSVALUE(params.menuId)
        this.$router.push({
          path: params.component
        })
      },
      dropdownCommand(params) {
        if (params === 'closeAll') {
          // 关闭全部 保留自己
          this.SAVE_EDITABLETABSVALUE()
          this.SAVE_EDITABLETABS()
          setTimeout(() => {
            this.$router.push({
              path: '/index'
            })
          }, 500);
        }
      }
  }
};
</script>

<style lang="scss">
@import  '../../style/mixin.scss';
@import  '../../style/common.scss';
@import "./index.scss";
/* 
enter-active 定义进入过渡的结束状态
leave-active 定义离开过渡的结束状态
 */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.5s;
}

/* 
enter定义进入过渡的开始状态
 */
.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}
/* 
leave-to离场动画结束后的状态
 */
.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>